<mat-card>Add item</mat-card>
<div class="content" [formGroup]="form">

  <mat-form-field appearance="legacy">
    <mat-label>Name</mat-label>
    <input matInput placeholder="name" name="name" formControlName="name" required>
  </mat-form-field>

  <mat-form-field appearance="legacy">
    <mat-label>Stock price</mat-label>
    <input matInput placeholder="stockPrice" name="stockPrice" formControlName="stockPrice" required>
    <mat-error *ngIf="stockPrice.invalid">{{getStockErrorMessage()}}</mat-error>
  </mat-form-field>

  <mat-form-field appearance="legacy">
    <mat-label>Price</mat-label>
    <input matInput placeholder="price" name="price" formControlName="price" required>
    <mat-error *ngIf="price.invalid">{{getPriceErrorMessage()}}</mat-error>
  </mat-form-field>

  <button mat-raised-button (click)="submitForm()" [disabled]="form.invalid">Add item</button>
</div>
